<template>
	<view class="list-box">
		<!-- 列表组件 -->

		<view v-for="item in list" :key="item.id" class="item" @click="navTo(`/pages/details/details?id=${item.id}`)">
			<view class="user-box">
				<image :src="item.userImg" mode=""></image>
				<!-- <image :src="item.userImg" mode="aspectFit"></image> -->
				<text class="userName">{{item.userName}}</text>
			</view>
			
			<view class="item-title">
				{{item.title}}
			</view>
			<view class="item-content">
				{{item.msg}}
			</view>
			<view v-if="item.url.length" class="item-imgs" >
				<!-- 图片合集 -->
				<template v-for="(rs,i) in item.url">
					<!-- 最多展示3张 -->
					<image v-if="i<3" :src="rs" mode="aspectFill" :key="i"></image>
				</template>
			</view>
			
			<view class="information">
				<view class="tabs">
					<!-- 类型标签  #游戏 #热门 #外设 -->
					<template v-for="(rs,i) in item.tags">
						<!-- 最多展示3张 -->
						<view v-if="i<3" :key="i" class="tabs-item">
							#{{rs.title}}
						</view>
					</template>
				</view>
				<!-- <view class="discuss">
				</view> -->
				<view class="love">
					<!-- 评论图标和数量 -->
					<view class="love-r">
					<uv-icon name="more-circle" class="love-r"></uv-icon>
					</view>
					
					<uv-icon name="thumb-up-fill" class="love-r"></uv-icon>
					<view class="love-r">{{item.likes}}</view>
						<!-- 点赞图标和数量 -->
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
			},
		},
		data() {
			return {

			}
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
		},
		onLoad(){
			
		}
		
	}
</script>

<style lang="scss" scoped>
	.list-box{
		width: 100%;
		height: 100%;
		padding: 24rpx;
		color: #000;
		background-color: #f9f9f9;
		box-sizing: border-box;
	}
	.item{
		width: 100%;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		margin-bottom: 16rpx;
		box-sizing: border-box;
	}
	
	.user-box{
		display: flex;
		align-items: center;
		height: 50rpx;
		box-sizing: border-box;
		
		&>image{
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			margin-right: 12rpx;
		}
		
		.userName{
			font-size: 22rpx;
			
		}
	}
	
	.item-title{
		font-size: 32rpx;
		font-weight: bold;
		height: 40rpx;
		line-height: 40rpx;
		// color: #050505;
	}
	.item-content{
		font-size: 26rpx;
		padding: 10rpx 0;
	}
	.item-imgs{
		display: flex;
		justify-content: space-between;
		padding: 8rpx 0;
		margin-bottom: 12rpx;
		&>image {
			width: 210rpx;
			height: 210rpx;
			border-radius: 12rpx;
		}
	}
	
	.information{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 50rpx;
	font-size: 24rpx;
	color: #999;
	box-sizing: border-box;
	}
	
	.tabs{
		display: flex;
		.tabs-item {
			padding: 0 12rpx;
			margin-right: 8rpx;
			color: #a190bd;
		}
	}
		
	.love{
		display: flex;
		
		.love-r{
			padding-right: 18rpx;
		}
	}
	
</style>